<script>
import UniPopup from "@/components/no-mask-popup/uni-popup.vue"
import analysisVideo from "../../analysisVideo.vue"
import closeIcon from "../../../assets/close.png"
import common from "../../common"
import imageUpload from "@/components/imageUpload/index.vue"
import { cloneDeep, getShowImage } from "@/utils"
import analysis from "./analysis.vue"
import answerRecord from "../answerRecord.vue"

export default {
  name: "answerSheet",
  components: { analysisVideo, UniPopup, imageUpload, analysis, answerRecord },
  data() {
    return {
      closeIcon,
      common,
      lastBtn: "", //用于标识用户点击的上一个按钮，以提供相应的样式效果进行标识，增强用户体验
      questionList: [],
      currentQuestion: null,
    }
  },
  props: {
    viewAnalysis: Boolean,
    currentQuestionIndex: Number,
    questionListProp: Array,
  },
  watch: {
    questionListProp: {
      handler(val) {
        this.questionList = val
        if (val.length && val.length > 0) {
          this.currentQuestion = cloneDeep(val[this.currentQuestionIndex])
        }
      },
      immediate: true,
    },
    currentQuestionIndex(newVal, oldVal) {
      this.questionList[oldVal] = this.currentQuestion
      this.currentQuestion = cloneDeep(this.questionList[newVal])
    },
  },
  methods: {
    getShowImage,
    open() {
      this.$refs["answer-sheet"].open()
    },
    // 切换到上一题
    prevQuestion() {
      this.$emit("update:currentQuestionIndex", this.currentQuestionIndex - 1)
    },
    //切换到下一题
    nextQuestion() {
      if (this.currentQuestionIndex < this.questionList.length - 1) {
        this.$emit("update:currentQuestionIndex", this.currentQuestionIndex + 1)
      }
    },
    handleSubmit() {
			this.questionList[this.currentQuestionIndex] = this.currentQuestion
      return this.questionList
    },
    openAnswerRecord() {
      this.$refs.answerRecord.open(this.questionList)
    },
  },
  inject: ["root", "parent"],
  emits: ["submit", "update:currentQuestionIndex", "getDetails"],
}
</script>

<template>
  <uni-popup ref="answer-sheet" type="bottom" :is-mask-click="false" mask-background-color="transparent">
    <view class="answer-sheet-content" v-if="currentQuestion">
      <view class="header">
        <!--				题目序号-->
        <view class="question-name">
          <text>{{ currentQuestion.serialNum }}</text>
          <text>.\t</text>
          <text style="color: darkred" v-if="viewAnalysis && !currentQuestion.topic.userAnswer && !currentQuestion.topic.userAnswerImage"
            >\t\t【未作答】</text
          >
        </view>
        <image class="icon" :src="closeIcon" @click="$refs['answer-sheet'].close()"></image>
      </view>
      <view class="content">
        <!--				题目名称-->
        <view class="question-name">{{ currentQuestion.topic.content }}</view>
        <!--				答题模式-->
        <template v-if="!viewAnalysis">
          <!--        图片上传-->
          <view class="input-item">
            <imageUpload v-model="currentQuestion.userAnswerImage"></imageUpload>
          </view>
          <!--				文本输入-->
          <view class="input-item input-container">
            <textarea v-model="currentQuestion.userAnswer" placeholder="请输入答案" :maxlength="-1"></textarea>
          </view>
        </template>
        <!--				查看答案-->
        <analysis v-else :question-item="currentQuestion" @getDetails="() => $emit('getDetails')"></analysis>
      </view>
      <view class="footer">
        <view class="btn" @click="$refs.answerRecord.open(questionList)">题目一览 </view>
        <view
          class="btn"
          @click="
            lastBtn = 'prevQuestion'
            prevQuestion()
          "
          :class="[lastBtn === 'prevQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex > 0"
          >上一题
        </view>
        <!--					做第一题时把上一题按钮禁用掉-->
        <view class="btn disable" v-else>上一题</view>
        <view
          class="btn"
          @click="
            lastBtn = 'nextQuestion'
            nextQuestion()
          "
          :class="[lastBtn === 'nextQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex < questionList.length - 1"
          >下一题
        </view>
        <!--					最后一道题显示提交按钮-->
        <view
          class="btn"
          v-else-if="!viewAnalysis"
          @click="
            () => {
              $emit('submit')
            }
          "
          >完成作答
        </view>
        <view class="btn disable" v-else>下一题</view>
      </view>
    </view>

    <!--		题目一览-->
    <answerRecord
      ref="answerRecord"
      :view-analysis="viewAnalysis"
      @change="(index) => $emit('update:currentQuestionIndex', index)"
    ></answerRecord>
  </uni-popup>
</template>

<style scoped lang="scss">
.answer-sheet-content {
  background: white;
  border-radius: 40rpx 40rpx 0 0;
  padding: {
    top: 30rpx;
    left: 30rpx;
    right: 30rpx;
  }
  border: 4rpx inset #999999;
  height: 750rpx;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .icon {
      width: 60rpx;
      height: 60rpx;
    }
    .question-name {
      font-size: calc(34rpx * var(--font-size-rate));
      font-weight: bold;
    }
  }
  > .content {
    height: 0;
    flex: 1;
    overflow-y: scroll;
    .question-name {
      font-size: calc(34rpx * var(--font-size-rate));
    }
    .input-item {
      margin-top: 20rpx;
    }
    .input-container {
      background: #f5f5f5;
      padding: 20rpx;
      border-radius: 20rpx;
    }
  }
  > .footer {
    display: flex;
    justify-content: space-around;
    padding-bottom: 10rpx;
    .btn {
      height: 60rpx;
      display: flex;
      align-items: center;
      border-radius: 40rpx;
      padding: 0 40rpx;
      border: 4rpx solid #999999;
      font-size: calc(30rpx * var(--font-size-rate));
      background: var(--theme-color-light);
      &.disable {
        opacity: 0.5;
      }
      &.active {
        border: 4rpx solid var(--text-color-theme);
      }
    }
  }
}
</style>
